<template>
	<view class="content">
		<u-navbar leftIcon="" leftIconSize="0px">
			<slot>
				<image src="https://cdn.zkjialan.com/img1/logo.png" class="logo"></image>
			</slot>
		</u-navbar>
		<view class="menuBox">
			<view class="menuBoxInner">
				<view class="menuItem3" :class="isAni==1?'ani1':''" @click="change(3)">
					<image :src="baseUrl+'gytlIcon.png?v=1.2'" class="menuIcon" mode="widthFix"
						:class="isAni==1?'ani4':''" />
					<text class="menuText">抗衰干预</text>
					<view class="active3" v-if="active==3"></view>
				</view>
				<view class="menuItem2" :class="isAni==1?'ani1':''" @click="change(2)">
					<image :src="baseUrl+'zhpfIcon2.png?v=1.2'" class="menuIcon" mode="widthFix"
						:class="isAni==1?'ani4':''" />
					<text class="menuText">药食同源</text>
					<view class="active2" v-if="active==2"></view>
				</view>
				<view class="menuItem1" :class="isAni==1?'ani1':''" @click="change(1)">
					<image :src="baseUrl+'yybjIcon.png'" class="menuIcon" mode="widthFix" :class="isAni==1?'ani4':''" />
					<text class="menuText">营养补剂</text>
					<view class="active1" v-if="active==1"></view>
				</view>
			</view>
			<image :src="baseUrl+'/ai22.png?v=1.1'" class="ai" @click="$navto.navto('/course/ai/ai')"
				v-if="category_id==1">
		</view>
		<scroll-view class="listBox" :class="category_id==1?'listBoxHeight':''" scroll-y="true" @scroll="scroll"
			@scrolltolower="getMore()">
			<view class="listBoxInner" v-if="active!=3">
				<view class="listItem" v-for="(item,index) in goods" :key="item.id"
					@click="info(item.team_goods,item.seckill_goods,item.team_goods_id,item.seckill_goods_id,item.id)">
					<image :src="item.min_cover" class="itemCover" />
					<view class="iconBox">
						<image :src="baseUrl+'pintuanIcon.png'" class="icon" v-if="item.team_goods==1" />
						<image :src="baseUrl+'miaoshaIcon.png'" class="icon" v-if="item.seckill_goods==1" />
					</view>
					<text class="itemName">{{item.name}}</text>
					<view class="priceBox">
						<text class="itemPrice">￥{{item.sell_price}}</text>
						<text class="itemPrice1-2" v-if="item.lineation_price>0">￥{{item.lineation_price}}</text>
					</view>
					<view class="buy">
						购买
					</view>
				</view>
			</view>
			<!-- 干预调理 -->
			<view class="listBoxInner" v-else>
				<view class="listItem1" v-for="(item,index) in goods" :key="item.id"
					@click="info(item.team_goods,item.seckill_goods,item.team_goods_id,item.seckill_goods_id,item.id)">
					<image :src="item.min_cover" class="itemCover1" />
					<view class="iconBox">
						<image :src="baseUrl+'pintuanIcon.png'" class="icon" v-if="item.team_goods==1" />
						<image :src="baseUrl+'miaoshaIcon.png'" class="icon" v-if="item.seckill_goods==1" />
					</view>
					<text class="itemName1">{{item.name}}</text>
					<view class="priceBox">
						<text class="itemPrice1">￥{{item.sell_price}}</text>
						<text class="itemPrice1-1" v-if="item.lineation_price>0">￥{{item.lineation_price}}</text>
					</view>
					<view class="buy1">
						购买
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		baseURL,
		basePath
	} from '@/config/app'
	export default {
		data() {
			return {
				bgColor: 'transparent',
				baseUrl: `https://cdn.zkjialan.com/img/product/`,
				content: '',
				isAni: 0,
				active: 3,
				category_id: 6,
				goods: '',
				page_no: 1,
				goodType: 1
			}
		},
		onShow() {
			// if (uni.getStorageSync('categoryType') == 2) { //显示组合商品
			// 	this.change(1);
			// 	uni.setStorageSync('categoryType', '1');
			// } else {
			// 	this.change(2);
			// }
		},
		onLoad(options) {
			this.page_no = 1;
			this.getGoods();
		},
		methods: {
			info(num1, num2, num3, num4, id) {
				// if (!this.isLogin) return this.$Router.push('/pages/login/login');
				if (num1 == 1) { //去拼团
					this.$navto.navto('/bundle/pages/goods_team_detail/goods_team_detail', {
						id: num3
					})
				} else if (num2 == 1) { //去秒杀
					this.$navto.navto('/bundle/pages/seckill_detail/seckill_detail', {
						id: num4
					})
				} else { //普通
					this.$navto.navto('/pages/goods_detail/goods_detail', {
						id: id,
						category_id: this.category_id
					})
				}
			},
			// 获取商品列表
			getMore() {
				this.page_no++;
				this.$request.get(
					`shopapi/Goods/lists?goods_type=1&page_no=${this.page_no}&page_size=10&category_id=${this.category_id}`
				).then(res => {
					this.goods.push(...res.data.data.lists);
				})
			},
			getGoods() {
				this.$request.get(
					`shopapi/Goods/lists?goods_type=1&page_no=${this.page_no}&page_size=10&category_id=${this.category_id}`
				).then(res => {
					this.goods = res.data.data.lists;
				})
			},
			change(num) {
				// if (!this.isLogin) return this.$Router.push('/pages/login/login');
				console.log(num);
				this.goods = [];
				this.active = num;
				this.category_id = num;
				if(num==3){
					this.category_id = 6;
				}
				console.log(this.category_id);
				this.page_no = 1;
				this.getGoods();
			},
			scroll(e) {
				let distance = e.detail.scrollTop;
				//改变按钮大小
				if (distance >= 100) {
					this.isAni = 1;
				} else {
					this.isAni = 0;
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.ai {
		width: 676rpx;
		height: 227rpx;
		margin-top: 40rpx;
		margin-left: 37rpx;
	}

	.iconBox {
		position: absolute;
		display: flex;
		top: 0;
		left: 0;

		.icon {
			width: 72rpx;
			height: 34rpx;
			margin-right: 15rpx;
		}
	}

	.ani4 {
		animation: ani4 0.2s 0s linear both alternate;
	}

	@keyframes ani4 {
		0% {}

		100% {
			top: 70rpx;
			left: 140rpx;
			width: 30%;
		}

	}

	.ani3 {
		animation: ani3 0.2s 0s linear both alternate;
	}

	@keyframes ani3 {
		0% {}

		100% {
			top: 27rpx;
			left: 212rpx;
			width: 30%;
		}

	}

	.ani2 {
		animation: ani2 0.1s 0s linear both alternate;
	}

	@keyframes ani2 {
		0% {}

		100% {
			// top: 54rpx;
			// width: 40%;
		}

	}

	.ani1 {
		animation: ani1 0.2s 0s linear both alternate;
	}

	@keyframes ani1 {
		0% {}

		100% {
			height: 136rpx;
		}

	}

	.active3 {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border-radius: 15rpx;
		border: 4rpx solid royalblue;
	}

	.active2 {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border-radius: 15rpx;
		border: 4rpx solid #c09d60;
	}

	.active1 {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border-radius: 15rpx;
		border: 4rpx solid #f08229;
	}

	.listBoxHeight {
		height: 49vh !important;
	}

	.listBox {
		position: relative;
		width: 670rpx;
		height: 67vh;
		margin-left: 40rpx;
		padding-top: 37rpx;
		overflow-y: scroll;

		.listBoxInner {
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			overflow-y: scroll;
			.listItem1 {
				position: relative;
				width: 670rpx;
				height: 540rpx;
				border-radius: 15rpx;
				// margin-top: 80rpx;
				background-color: #fff;
				margin-bottom: 40rpx;
			
				.buy1 {
					position: absolute;
					width: 100rpx;
					height: 40rpx;
					top: 457rpx;
					right: 40rpx;
					font-size: 23rpx;
					font-family: 'ar';
					text-align: center;
					line-height: 40rpx;
					border-radius: 20rpx;
					background-color: #f08229;
					color: #fff;
				}
			
				.priceBox {
					position: absolute;
					display: flex;
					top: 478rpx;
					left: 50rpx;
					width: 300rpx;
					font-size: 26rpx;
					font-family: 'ar';
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
			
					.itemPrice1-1 {
						margin-left: 10rpx;
						color: #999999;
						text-decoration: line-through;
					}
			
					.itemPrice1 {
						color: #f08229;
						font-weight: 700;
					}
				}
			
				.itemCover1 {
					width: 100%;
					height: 390rpx;
					border-radius: 15rpx 15rpx 0 0;
				}
			
				.itemName1 {
					position: absolute;
					width: 300rpx;
					font-size: 30rpx;
					font-family: 'am';
					color: #141414;
					top: 425rpx;
					left: 50rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.listItem {
				position: relative;
				width: 325rpx;
				height: 350rpx;
				border-radius: 15rpx;
				margin-bottom: 40rpx;
				background-color: #fff;

				.buy {
					position: absolute;
					width: 100rpx;
					height: 40rpx;
					top: 285rpx;
					right: 10rpx;
					font-size: 23rpx;
					font-family: 'ar';
					text-align: center;
					line-height: 40rpx;
					border-radius: 20rpx;
					background-color: #f08229;
					color: #fff;
				}

				.priceBox {
					position: absolute;
					display: flex;
					top: 288rpx;
					left: 20rpx;
					width: 300rpx;
					font-size: 26rpx;
					font-family: 'ar';
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					align-items: center;

					.itemPrice {
						font-size: 23rpx;
						font-family: 'ar';
						color: #f08229;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-weight: 700;
					}

					.itemPrice1-2 {
						margin-left: 10rpx;
						font-size: 23rpx;
						color: #999999;
						text-decoration: line-through;
					}
				}

				.itemCover {
					width: 100%;
					height: 216rpx;
					border-radius: 15rpx 15rpx 0 0;
				}

				.itemName {
					position: absolute;
					width: 300rpx;
					font-size: 25rpx;
					font-family: 'am';
					color: #141414;
					top: 246rpx;
					left: 25rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.menuBox {
		width: 100%;
		padding-top: 40rpx;
		padding-bottom: 20rpx;
		background-color: #fff;
		z-index: 2;

		.menuBoxInner {
			width: 670rpx;
			margin-left: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.menuItem3 {
				position: relative;
				width: 216rpx;
				height: 194rpx;
				border-radius: 15rpx;
				background: url('https://cdn.zkjialan.com/img/product/gytl.png?v=1.0');
				background-size: 100% 100%;
				overflow: hidden;

				.menuIcon {
					position: absolute;
					top: 90rpx;
					left: 90rpx;
					width: 70%;
				}

				.menuText {
					position: absolute;
					top: 30rpx;
					left: 25rpx;
					color: #141414;
					font-size: 30rpx;
					font-family: 'am';
				}
			}

			.menuItem1 {
				position: relative;
				width: 216rpx;
				height: 194rpx;
				border-radius: 15rpx;
				background: url('https://cdn.zkjialan.com/img/product/yybj.png');
				background-size: 100% 100%;
				overflow: hidden;
				transition: all 1s;

				.menuIcon {
					position: absolute;
					top: 90rpx;
					left: 90rpx;
					width: 70%;
				}

				.menuText {
					position: absolute;
					top: 30rpx;
					left: 25rpx;
					color: #141414;
					font-size: 30rpx;
					font-family: 'am';
				}
			}

			.menuItem2 {
				position: relative;
				width: 216rpx;
				height: 194rpx;
				border-radius: 15rpx;
				background: url('https://cdn.zkjialan.com/img/product/zhpf.png?v=1.0');
				background-size: 100% 100%;
				overflow: hidden;

				.menuIcon {
					position: absolute;
					top: 90rpx;
					left: 90rpx;
					width: 70%;
				}

				.menuText {
					position: absolute;
					top: 30rpx;
					left: 25rpx;
					color: #141414;
					font-size: 30rpx;
					font-family: 'am';
				}
			}
		}
	}

	/deep/ .u-navbar-left {
		display: none;
	}

	.logo {
		width: 320rpx;
		height: 52rpx;
		margin-left: 40rpx;
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100vh;
		background-color: #f8f5f0;
	}

	page {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: scroll;
	}
</style>